// header
window.addEventListener('load',function(){
    var navibar = document.querySelector('#navibar');
    for (i = 0; i < navibar.children.length; i++) {
        navibar.children[i].addEventListener('mouseover', function() {
           if (this.children[0].tagName == 'DIV'){
            this.children[0].style.display = 'block';
           }
        })
    }
    for (i = 0; i < navibar.children.length; i++) {
        navibar.children[i].addEventListener('mouseout', function() {
           if (this.children[0].tagName == 'DIV'){
            this.children[0].style.display = 'none';
           }
        })
    }
// head animation
    var top = document.querySelector('header');
    var frag = 1;
    document.addEventListener('scroll',function(){
        if (window.pageYOffset > 30 && frag == 1) {
            top.className = 'betop';
            var timer1 = setInterval(function(){
                if (top.offsetHeight > 50){
                    var a = top.offsetHeight-2;
                    top.style.height = a +'px';
                } else {
                    clearInterval(timer1);
                }
            },30)
            frag = 0;
        } else if (window.pageYOffset <30 && frag == 0){
            top.className = '';
            var timer2 = setInterval(function(){
                if (top.offsetHeight < 70){
                    var a = top.offsetHeight+2;
                    top.style.height = a +'px';
                } else {
                    clearInterval(timer2);
                }
            },30)
            frag = 1;
        }
    })

// popular
    var popular = document.querySelector('#popular');
    for (i = 0; i < popular.children.length;i++){
        popular.children[i].addEventListener('mouseover',function() {
            this.children[0].style.display = 'none';
        })
    }
    for (i = 0; i < popular.children.length;i++){
        popular.children[i].addEventListener('mouseout',function() {
            this.children[0].style.display = 'block';
        })
    }

// focus
// 小圆圈
    var flexwidth = document.querySelector('.focus')
    var ul_focus = document.querySelector('#focus');
    var ol_circle = document.querySelector('#circle');
    var frog = true;  //引入节流阀
    for (var i = 0; i < ul_focus.children.length; i++){
        var newcircle = document.createElement('li');
        newcircle.setAttribute('index',i);
        ol_circle.appendChild(newcircle);
    }
    for ( var i =0;i < ol_circle.children.length; i++){
        ol_circle.children[i].addEventListener('click',function(){
            if(frog){
                frog = false;
                for ( var i =0;i < ol_circle.children.length; i++){
                ol_circle.children[i].style.backgroundColor = 'rgba(194, 194, 194, 0.5)';
                }
                this.style.backgroundColor = 'white';
                var index = this.getAttribute('index');
                c = n = index;
                animate(ul_focus,-index * flexwidth.offsetWidth,function() {
                    frog = true;
                });  
            }
        })

    }
// 右侧箭头
    var n = 0;
    var c = 0;
    var rarr = document.querySelector('#rr');
    var cloned = ul_focus.children[0].cloneNode(true);
    ul_focus.appendChild(cloned);
    rarr.addEventListener('click',function(){
        if (frog){
            frog = false;
            if(n === ul_focus.children.length-1){
                ul_focus.style.left = '0';
                n = 0;
            }
            n++; //n++必须放到if后面，不然最后一张图片没有动画
            animate(ul_focus,-n * flexwidth.offsetWidth,function() {
                frog = true;
            });
            c++;
            if (c ===  ol_circle.children.length){
                c = 0;
            }
            for (var i = 0;i < ol_circle.children.length;i++){
                ol_circle.children[i].style.backgroundColor = 'rgba(194, 194, 194, 0.5)';
                ol_circle.children[c].style.backgroundColor = 'white';
            }
        }

    })
//左侧箭头
    var larr = document.querySelector('#lr');
    larr.addEventListener('click',function(){
        if (frog){
            frog = false;
            if(n === 0){
                ul_focus.style.left = -(ul_focus.children.length - 1)*flexwidth.offsetWidth + 'px';
                n = ul_focus.children.length - 1;
            }
            n--; //n++必须放到if后面，不然最后一张图片没有动画
            animate(ul_focus,-n * flexwidth.offsetWidth,function() {
                frog = true;
            });
            c--;
            if (c < 0){
                c = ol_circle.children.length - 1;
            }
            for (var i = 0;i < ol_circle.children.length;i++){
                ol_circle.children[i].style.backgroundColor = 'rgba(194, 194, 194, 0.5)';
                ol_circle.children[c].style.backgroundColor = 'white';
            }
        }
    })
// 自动播放
    var timer = setInterval( function() {
        rarr.click();
    },3000)

    ul_focus.addEventListener('mouseover', function() {
        clearInterval(timer);
        timer = null
    })
    ul_focus.addEventListener('mouseout', function() {
        timer = setInterval( function() {
            rarr.click();
        },3000)
    })
})
